<template>
  <div class="coach-arrangement">
    <h1>教练排班管理</h1>
    
    <div class="toolbar">
      <el-button type="primary" @click="handleAddSchedule">
        <el-icon><Plus /></el-icon> 新增排班
      </el-button>
      <el-date-picker
        v-model="currentMonth"
        type="month"
        placeholder="选择月份"
        @change="loadScheduleData"
      />
    </div>
    
    <el-calendar v-model="currentDate">
      <template #dateCell="{date, data}">
        <div class="calendar-day">
          <div class="day-number">{{ data.day.split('-')[2] }}</div>
          <div 
            v-for="schedule in getSchedulesForDay(date)" 
            :key="schedule.id"
            class="schedule-item"
          >
            {{ schedule.coachName }} - {{ schedule.timeSlot }}
          </div>
        </div>
      </template>
    </el-calendar>
    
    <!-- 新增/编辑排班对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="scheduleForm" label-width="80px">
        <el-form-item label="教练">
          <el-select v-model="scheduleForm.coachId" placeholder="请选择教练">
            <el-option 
              v-for="coach in coaches" 
              :key="coach.id" 
              :label="coach.name" 
              :value="coach.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker 
            v-model="scheduleForm.date" 
            type="date" 
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="时间段">
          <el-time-select
            v-model="scheduleForm.startTime"
            :picker-options="{
              start: '08:00',
              step: '01:00',
              end: '18:00'
            }"
            placeholder="开始时间">
          </el-time-select>
          <el-time-select
            v-model="scheduleForm.endTime"
            :picker-options="{
              start: '09:00',
              step: '01:00',
              end: '19:00',
              minTime: scheduleForm.startTime
            }"
            placeholder="结束时间">
          </el-time-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitSchedule">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { Plus } from '@element-plus/icons-vue'

export default {
  name: 'CoachArrangement',
  components: { Plus },
  setup() {
    const currentDate = ref(new Date())
    const currentMonth = ref(new Date())
    const dialogVisible = ref(false)
    const dialogTitle = ref('新增排班')
    const scheduleForm = ref({
      id: null,
      coachId: '',
      date: '',
      startTime: '',
      endTime: ''
    })
    
    // 模拟教练数据
    const coaches = ref([
      { id: 1, name: '张教练' },
      { id: 2, name: '李教练' },
      { id: 3, name: '王教练' }
    ])
    
    // 模拟排班数据
    const schedules = ref([
      { id: 1, coachId: 1, coachName: '张教练', date: '2023-06-15', timeSlot: '09:00-12:00' },
      { id: 2, coachId: 2, coachName: '李教练', date: '2023-06-15', timeSlot: '14:00-17:00' },
      { id: 3, coachId: 3, coachName: '王教练', date: '2023-06-16', timeSlot: '10:00-12:00' }
    ])
    
    const getSchedulesForDay = (date) => {
      const dateStr = date.toISOString().split('T')[0]
      return schedules.value.filter(item => item.date === dateStr)
    }
    
    const loadScheduleData = () => {
      // 这里应该调用API获取当前月份的排班数据
      console.log('加载排班数据:', currentMonth.value)
    }
    
    const handleAddSchedule = () => {
      dialogTitle.value = '新增排班'
      scheduleForm.value = {
        id: null,
        coachId: '',
        date: '',
        startTime: '',
        endTime: ''
      }
      dialogVisible.value = true
    }
    
    const submitSchedule = () => {
      // 这里应该调用API提交排班数据
      const timeSlot = `${scheduleForm.value.startTime}-${scheduleForm.value.endTime}`
      const coach = coaches.value.find(c => c.id === scheduleForm.value.coachId)
      
      if (scheduleForm.value.id) {
        // 更新现有排班
        const index = schedules.value.findIndex(s => s.id === scheduleForm.value.id)
        if (index !== -1) {
          schedules.value[index] = {
            ...scheduleForm.value,
            coachName: coach.name,
            timeSlot: timeSlot
          }
        }
      } else {
        // 新增排班
        const newId = Math.max(...schedules.value.map(s => s.id)) + 1
        schedules.value.push({
          id: newId,
          coachId: scheduleForm.value.coachId,
          coachName: coach.name,
          date: scheduleForm.value.date,
          timeSlot: timeSlot
        })
      }
      
      dialogVisible.value = false
    }
    
    return {
      currentDate,
      currentMonth,
      dialogVisible,
      dialogTitle,
      scheduleForm,
      coaches,
      schedules,
      getSchedulesForDay,
      loadScheduleData,
      handleAddSchedule,
      submitSchedule
    }
  }
}
</script>

<style scoped>
.coach-arrangement {
  padding: 20px;
}

.toolbar {
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
}

.calendar-day {
  height: 100%;
  padding: 5px;
}

.day-number {
  font-weight: bold;
  margin-bottom: 5px;
}

.schedule-item {
  font-size: 12px;
  padding: 2px 5px;
  margin: 2px 0;
  background-color: #f0f7ff;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>